<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="renderer" content="webkit">
  <title>首页 | LAYUI ADMIN</title>
  <link href="../../assets/favicon.ico" type="image/x-icon" rel="shortcut icon">
  <link href="https://www.layuicdn.com/layui/css/layui.css" type="text/css" rel="stylesheet">
  <link href="../../css/admin.css" rel="stylesheet">
</head>

<body>
  <div id="layApp">
    <div class="layadmin-page-header">
      <span class="layui-breadcrumb">
        <a>首页</a>
        <a>页面</a>
        <a>查询类</a>
        <a style="cursor: auto;"><cite>上下页</cite></a>
      </span>
    </div>

    <div class="layui-fluid">
      <template id="table-search-form">
        <lay-form lay-fiter="table-search-form-form">
          <lay-form-item label="文章ID" tips="<strong>b</strong>">
            <input class="layui-input" name="id" type="text">
          </lay-form-item>
          <lay-form-item label="作者" size="2" html-for="false">
            <input class="layui-input" name="name" type="text">
          </lay-form-item>
          <lay-form-item label="标题">
            <input class="layui-input" name="title" type="text">
          </lay-form-item>
          <lay-form-item label="文章标签">
            <select name="tag">
              <option value="美食">美食</option>
              <option value="新闻">新闻</option>
              <option value="八卦">八卦</option>
              <option value="体育">体育</option>
              <option value="音乐">音乐</option>
            </select>
          </lay-form-item>
        </lay-form>
      </template>
      <div class="layui-card">
        <div class="layui-card-body">
          <table class="layui-hide" id="layTable" lay-filter="layTable"></table>
        </div>
      </div>
    </div>
  </div>

  <script src="https://www.layuicdn.com/layui/layui.js"></script>
  <script>
    layui.config({
      base: '../../js/'
    }).extend({
      index: 'index',
      // renderTemplate: 'renderTemplate'
      proGridForm: './lib/components/grid-form'
    }).use(['table','index', 'proGridForm'], function() {
      var table = layui.table;
      var $ = layui.jquery;

      table.render({
        id: 'layTable',
        elem: '#layTable',
        url: layui.cache.base + '../mock/table.json',
        page: true,
        cols: [[ //表头
          {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'},
          {field: 'username', title: '用户名', width:80},
          {field: 'sex', title: '性别', width:80, sort: true},
          {field: 'city', title: '城市', width:80},
          {field: 'sign', title: '签名'},
          {field: 'experience', title: '积分', width: 80, sort: true},
          {field: 'score', title: '评分', width: 80, sort: true},
          {field: 'classify', title: '职业', width: 80},
          {field: 'wealth', title: '财富', width: 135, sort: true}
        ]]
      })

      layui.proGridForm.render({
        el: '#table-search-form',
        search: function() {
          console.log('search')
        },
        reset: function() {
          console.log('reset')
        }
      })
    })
  </script>
</body>
</html>
